<template>
    <div>
        <a-form :form="form" autocomplete="off">
            <a-row :gutter="0">
                <a-col :key="1" :span="12">
                    <a-form-item label="账目类型" :labelCol="{lg: {span: 8}, sm: {span: 8}}"
                                 :wrapperCol="{lg: {span: 16}, sm: {span: 16} }">
                        <a-select
                                v-decorator="['type_id',{rules: [{ required: true, message: '请选择账目类型' }]}]"
                                placeholder="请选择账目类型"
                                @change="typeChange"
                        >
                            <a-select-option v-for="(v,k) in types" :key="k" :value="k">
                                {{v}}
                            </a-select-option>
                        </a-select>

                    </a-form-item>
                </a-col>
                <a-col :key="2" :span="12">
                    <a-form-item label="金额" :labelCol="{lg: {span: 8}, sm: {span: 8}}"
                                 :wrapperCol="{lg: {span: 16}, sm: {span: 16} }">
                        <a-input :addonBefore="icon" AUTOCOMPLETE="off" placeholder="金额" readOnly
                                 onfocus="readOnly = false" v-decorator="[
                          'amount',
                          {
                              rules: [{
                                  required: true, message: '请输入金额'
                               }, {
                                  pattern: /^[1-9]+/, message: '金额书写不正确'
                              }]
                          }
                      ]"/>
                    </a-form-item>
                </a-col>
                <a-col :key="3" :span="24">
                    <a-form-item label="服务号" :labelCol="{lg: {span: 4}, sm: {span: 4}}"
                                 :wrapperCol="{lg: {span: 20}, sm: {span: 20} }">
                        <a-select
                                v-decorator="['service_id',{rules: [{ required: true, message: '请选择服务号' }]}]"
                                placeholder="请选择服务号"
                        >
                            <a-select-option v-for="v in services" :key="v.id" :value="v.id">
                                {{v.name}}
                            </a-select-option>
                        </a-select>

                    </a-form-item>
                </a-col>
                <a-col :key="4" :span="24">
                    <a-form-item label="相关凭证" :labelCol="{lg: {span: 4}, sm: {span: 4}}"
                                 :wrapperCol="{lg: {span: 19}, sm: {span: 19} }">
                        <a-upload
                                listType="picture-card"
                                :customRequest="upload"
                                :beforeUpload="beforeUpload"
                                :remove="handlePicChange"
                                :fileList="fileList"
                                @preview="handlePreview"
                                v-decorator="['evidence',{rules: [{ required: true, message: '请上传相关凭证' }]}]"
                        >
                            <div v-if="fileList.length < 8">
                                <a-icon type="plus" :style="{fontSize: '45px', color: '#6B839D'}"/>
                            </div>
                        </a-upload>
                        <a-modal :visible="previewVisible" :footer="null" @cancel="handleCancel" centered>
                            <img alt="example" style="width: 100%" :src="previewImage"/>
                        </a-modal>
                    </a-form-item>
                </a-col>
                <a-col :key="5" :span="24">
                    <a-form-item label="备注" :labelCol="{lg: {span: 4}, sm: {span: 4}}"
                                 :wrapperCol="{lg: {span: 20}, sm: {span: 20} }">
                        <a-textarea placeholder="请输入备注" v-decorator="['remark', {
                                rules: [{
                                    max: 70, message: '字数不超过70'
                                }]
                            }]" maxLength="70" :rows="4"/>
                    </a-form-item>
                </a-col>
                <a-col :key="6" :span="24">
                    <a-form-item label="密码验证" :labelCol="{lg: {span: 4}, sm: {span: 4}}"
                                 :wrapperCol="{lg: {span: 20}, sm: {span: 20} }">
                        <a-input type="password" AUTOCOMPLETE="off" placeholder="请输入密码" readOnly
                                 onfocus="readOnly = false" v-decorator="[
                          'password',
                          {
                              rules: [{
                                  required: true, message: '请输入密码'
                              }, {
                                    pattern: /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z!@#$%^&*]{6,20}$/, message: '密码由6-20位数字、字母、符号 (!@#$%^&*()) 组成，最少包含一个字母、一个数字'
                                }],
                              validateTrigger: 'blur',
                          }
                      ]"/>
                    </a-form-item>
                </a-col>
            </a-row>
        </a-form>
    </div>
</template>

<script>
    import {getBase64} from "@/utils/ImageBase64";

    export default {
        name: 'create',
        props: ['services', 'types'],
        data() {
            return {
                form: this.$form.createForm(this),
                previewVisible: false,
                previewImage: '',
                fileList: [],
                icon: ''
            }
        },
        mounted() {

        },
        methods: {
            onSubmit() {
                this.form.validateFields((err, values) => {
                    if (!err) {
                        if (values.evidence) {
                            let evidence = [];
                            this.fileList.map(m => {
                                evidence.push(m.name)
                            });
                            values.evidence = evidence
                        }

                        this.http('post', 'point/create', values).then(res => {
                            if (res.id) {
                                this.$message.success(res.msg, 1);
                                this.$emit("hideCreate");
                                this.$emit("getList");
                                this.form.resetFields();
                                this.fileList = []
                            } else {
                                this.$message.error(res.msg, 1);
                            }
                        })
                    }
                })
            },
            reset() {
                this.form.resetFields();
                this.fileList = []
            },
            typeChange(key) {
                if (['1', '2', '6'].includes(key)) {
                    this.icon = '+'
                } else {
                    this.icon = '-'
                }
            },
            handlePicChange() {
                this.fileList = this.fileList.filter(item => {
                    return item.status !== 'removed'
                });
            },
            handleCancel() {
                this.previewVisible = false
            },
            handlePreview(file) {
                this.previewImage = file.url || file.thumbUrl
                this.previewVisible = true
            },
            beforeUpload(file) {
                const typeB = file.type == "image/jpeg" || file.type == "image/png";
                if (!typeB) {
                    this.$message.error("请选择jpg,png格式的图片", 1);
                }
                const isLt2M = file.size / 1024 / 1024 < 2;
                if (!isLt2M) {
                    this.$message.error("图片大小必须小于2MB!", 1);
                }
                return typeB && isLt2M;
            },
            upload(file) {
                getBase64(file.file, base64 => {
                    this.http("post", "upload/upload", {image: base64}).then(res => {
                        this.fileList.push({uid: this.fileList.length + 1, name: res.url, url: res.imgurl})
                    });
                });
            },
        }
    }
</script>
<style rel="stylesheet/scss" lang="scss" scoped>

</style>
